import React from 'react';

import { VideosValueType } from 'src/redux';

interface Props extends VideosValueType {
  from: string;
}

const Web: React.FC<Props> = ({ id, name, pic, describe, actor, from }) => (
  <div className="card-container">
    <span className="img-container">
      <img src={pic} alt={name} className="img-pic" data-id={id} data-from={from} />
    </span>

    <span className="card-introduce-container">
      <span className="card-introduce">
        <span>影片名：</span>
        <span className="card-content-name" title={name || '无'} data-id={id} data-from={from}>
          {name || '无'}
        </span>
      </span>
      <span className="card-introduce">
        <span>
          演<span style={{ visibility: 'hidden' }}>员</span>员：
        </span>
        <span className="card-content card-content-actor" title={actor || '无'}>
          {actor || '无'}
        </span>
      </span>
      <span className="card-introduce">
        <span>
          简<span style={{ visibility: 'hidden' }}>介</span>介：
        </span>
        <span className="card-content" title={describe && describe !== 'undefined' ? describe : '无'}>
          {describe && describe !== 'undefined' ? describe : '无'}
        </span>
      </span>
      <span className="card-from">{from}</span>
      <span className="card-play-btn" data-id={id} data-from={from}>
        立即播放
      </span>
    </span>
  </div>
);

export const WebCard = React.memo(Web);
